@import "common";

.header {
    width: 100%;
    height: 88/100rem;
    padding: 0 20/100rem;
    box-sizing: border-box;
    z-index: 1;
    position: fixed;
    left: 0;
    top: 0;
    .header-center {
        width: 100%;
        height: 100%;
        background: skyblue;
        float: left;
        .header-center-box {
            margin: 0 (56+32+32)/100rem;
            height: 72/100rem;
            margin-top: 8/100rem;
            background-color: #f7f7f7;
            border-radius: 36/100rem;
            position: relative;
            overflow: hidden;
            img {
                .vCenter();
                left: 92/100rem;
            }
            input {
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
                padding-left: (92 + 42 + 10)/100rem;
                box-sizing: border-box;
                font-size: 30/100rem;
                color: #c9c9c9;
            }
            .header-title {
                display: none;
            }
            .header-switch {
                display: none;
            }
        }
    }
    .header-left {
        width: 56/100rem;
        height: 56/100rem;
        float: left;
        margin-left: -100%;
        margin-top: 16/100rem;
        background: url(../images/topbar-it666-discern.png) no-repeat;
        background-size: 100% auto;
    }
    .header-right {
        width: 56/100rem;
        height: 56/100rem;
        float: left;
        margin-left: -56/100rem;
        margin-top: 16/100rem;
        background: url(../images/topbar-it666-play.png) no-repeat;
        background-size: 100% auto;
    }
    .header-cancel {
        display: none;
    }

    &.active {
        .header-left {
            display: none;
        }
        .header-right {
            background: url(../images/topbar-it666-category.png) no-repeat;
            background-size: 100% auto;
        }
        .header-center {
            .header-center-box {
                margin-left: 0;
                margin-right: (2*120)/100rem;
            }
            img {
                left: 22/100rem;
            }
            input {
                padding-left: (22 + 42)/100rem;
            }
        }
        .header-cancel {
            display: block;
            float: left;
            //margin-right: 200/100rem;
            margin-left: -200/100rem;
            line-height: 88/100rem;
            a {
                font-size: 32/100rem;
                color: #333;
                font-weight: bold;
            }
        }
    }
    &.video {
        .header-left {
            background: url(../images/topbar-it666-video.png) no-repeat;
            background-size: 100% auto;
        }
    }
    &.me {
        .header-left {
            background: url(../images/topbar-it666-cloud.png) no-repeat;
            background-size: 100% auto;
        }
        .header-center {
            .header-center-box {
                background-color: transparent;
                img {display: none;}
                input {display: none;}
                .header-title {
                    display: block;
                    line-height: 72/100rem;
                    font-size: 34/100rem;
                    color: #333;
                    text-align: center;
                    font-weight: bold;
                }
            }
        }
    }
    &.friend {
        .header-left {
            background: url(../images/topbar-it666-add.png) no-repeat;
            background-size: 100% auto;
        }
        .header-center {
            .header-center-box {
                background-color: transparent;
                img {display: none;}
                input {display: none;}
                .header-title {display: none;}
                .header-switch {
                    display: flex;
                    width: 280/100rem;
                    height: 58/100rem;
                    margin: 0 auto;
                    margin-top: 7/100rem;
                    overflow: hidden;
                    border-radius: 29/100rem;
                    border: 1px solid #ffcbc8;
                    position: relative;
                    i {
                        display: block;
                        width: 140/100rem;
                        height: 100%;
                        background-color: @nj-orange;
                        border-radius: 29/100rem;
                        position: absolute;
                        
                        left: 0;
                        top: 0;
                    }
                    span {
                        display: inline-block;
                        position: relative;
                        z-index: 1;
                        width: 140/100rem;
                        height: 100%;
                        font-size: 34/100rem;
                        font-weight: bold;
                        line-height: 58/100rem;
                        text-align: center;
                        color: @nj-orange;
                        &.active {
                            color: white;
                        }
                    }
                }
            }
        }
    }
    &.account {
        .header-left {
            background: url(../images/topbar-it666-scan.png) no-repeat;
            background-size: 100% auto;
        }
        .header-center {
            .header-center-box {
                background-color: transparent;
                img {
                    display: none;
                }
                input {
                    display: none;
                }
                .header-title {
                    display: none;
                }
            }
        }
    }
}

.footer {
    width: 100%;
    height: 98/100rem;
    background-color:pink;
    position: fixed;
    left: 0;
    bottom: 0;
    ul {
        list-style: none;
        width: 100%;
        height: 100%;
        display: flex;
        li {
            margin: 0 46/100rem;
            text-align: center;
            img {
                display: block;
                margin-top: 10/100rem;
                width: 56/100rem;
                height: 56/100rem;
            }
            span {
                font-size: 18/100rem;
            }
            &.active {
                img {
                    background-color: @nj-orange;
                    border-radius: 28/100rem;
                }
                span {
                    color: @nj-orange;
                }
            }
        }
    }
}

.main {
    width: 100%;
    height: 100%;
    .main-in {
        width: 100%;
        padding: 0 30/100rem;
        box-sizing: border-box;
        .pull-down {
            width: 100%;
            height: 88/100rem;
            position: relative;
            img {
                .center();
            }
            svg {
                .center();
            }
        }
        .pull-up {
            width: 100%;
            height: 98/100rem;
            p {
                text-align: center;
                padding-top: 28/100rem;
                box-sizing: border-box;
                font-size: 24/100rem;
            }
        }
        .swiper-container {
            margin-top: 30/100rem;
            width: 690/100rem;
            height: 266/100rem;
            border-radius: 10/100rem;

            .swiper-wrapper {
                .swiper-slide {
                    span {
                        padding: 5/100rem 10/100rem;
                        font-size: 22/100rem;
                        color: #fff;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        border-top-left-radius: 15/100rem;
                        background-color: deepskyblue;
                    }
                }
            }

            .swiper-pagination {
                .my-bullet {
                    display: inline-block;
                    width: 14/100rem;
                    height: 14/100rem;
                    margin: 0 6/100rem;
                    background: #ccc;
                    border-radius: 50%;
                }
                .my-bullet-active {
                    background: @nj-orange;
                }
            }
        }
        .nav {
            width: 100%;
            padding: 44/100rem 0;
            ul {
                list-style: none;
                display: flex;
                justify-content: space-between;
                li {
                    width: 98/100rem;
                    text-align: center;
                    img {
                        width: 98/100rem;
                        background: @nj-orange;
                        border-radius: 50%;
                        display: block;
                        margin-bottom: 20/100rem;
                    }
                    span {
                        font-size: 22/100rem;
                    }
                    p {
                        position: relative;
                        i {
                            font-size: 23/100rem;
                            color: @nj-orange;
                            .center();
                            top: 52%;
                            font-style: normal;
                            font-weight: bold;
                        }
                    }
                }
            }
            
            
        }
        .recommend {
            width: 100%;
            border-top: 1px solid #ccc;
            .recommend-top {
                width: 100%;
                height: 120/100rem;
                display: flex;
                justify-content: space-between;
                h3 {
                    font-size: 34/100rem;
                    color: #333;
                    font-weight: bold;
                    line-height: 120/100rem;
                }
                span {
                    font-size: 26/100rem;
                    text-align: center;
                    padding: 0 20/100rem;
                    height: 66/100rem;
                    line-height: 66/100rem;
                    box-sizing: border-box;
                    border-radius: 33/100rem;
                    border: 1px solid #333;
                    margin-top: 27/100rem;
                }
            }
            .recommend-bottom {
                width: 100%;
                ul {
                    list-style: none;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    li {
                        margin-bottom: 40/100rem;
                        div {
                            width: 216/100rem;
                            height: 216/100rem;
                            border-radius: 15/100rem;
                            overflow: hidden;
                            position: relative;
                            img {
                                width: 100%;
                            }
                            p {
                                position: absolute;
                                top: 2/100rem;
                                right: 5/100rem;
                                img {
                                    width: 26/100rem;
                                    vertical-align: top;
                                    position: relative; //相对于自己原来的位置
                                    top: 5/100rem;
                                }
                                span {
                                    font-size: 26/100rem;
                                    color: #fff;
                                }
                            }
                        }
                        &>p {
                            width: 216/100rem;
                            margin-top: 10/100rem;
                            font-size: 26/100rem;
                            color: #333;
                        }
                        
                    }
                }
            }
        }
        .exclusive {
            width: 100%;
            border-top: 1px solid #ccc;
            .exclusive-top {
                width: 100%;
                height: 120/100rem;
                display: flex;
                justify-content: space-between;
                h3 {
                    font-size: 34/100rem;
                    color: #333;
                    font-weight: bold;
                    line-height: 120/100rem;
                }
                span {
                    font-size: 26/100rem;
                    text-align: center;
                    padding: 0 20/100rem;
                    height: 66/100rem;
                    line-height: 66/100rem;
                    box-sizing: border-box;
                    border-radius: 33/100rem;
                    border: 1px solid #333;
                    margin-top: 27/100rem;
                }
            }
            .exclusive-bottom {
                width: 100%;
                ul {
                    list-style: none;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    li {
                        margin-bottom: 40/100rem;
                        div {
                            width: 334/100rem;
                            border-radius: 15/100rem;
                            overflow: hidden;
                            position: relative;
                            i {
                                display: inline-block;
                                width: 34/100rem;
                                height: 34/100rem;
                                border: 1px solid #fff;
                                border-radius: 50%;
                                background: url(./../images/home-small-exclusive.png) no-repeat;
                                background-size: 100% auto;
                                position: absolute;
                                top: 8/100rem;
                                left: 8/100rem;
                                z-index: 10;
                            }
                        }
                        p {
                            width: 344/100rem;
                            margin-top: 10/100rem;
                            font-size: 26/100rem;
                            color: #333;
                        }
                        &:last-child {
                            div{
                                width: 690/100rem;
                            }
                            p {
                                width: 690/100rem;
                            }
                        }
                    }
                }
            }
        }
        .album {
            width: 100%;
            border-top: 1px solid #ccc;
            .album-top {
                width: 100%;
                height: 120/100rem;
                display: flex;
                justify-content: space-between;
                h3 {
                    font-size: 34/100rem;
                    color: #333;
                    font-weight: bold;
                    line-height: 120/100rem;
                }
                span {
                    font-size: 26/100rem;
                    text-align: center;
                    padding: 0 20/100rem;
                    height: 66/100rem;
                    line-height: 66/100rem;
                    box-sizing: border-box;
                    border-radius: 33/100rem;
                    border: 1px solid #333;
                    margin-top: 27/100rem;
                }
            }
            .album-bottom {
                width: 100%;
                ul {
                    list-style: none;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    li {
                        margin-bottom: 40/100rem;
                        div {
                            width: 216/100rem;
                            height: 216/100rem;
                            border-radius: 15/100rem;
                            overflow: hidden;
                            position: relative;
                        }
                        &>p:nth-of-type(1) {
                            width: 216/100rem;
                            margin-top: 15/100rem;
                            font-size: 26/100rem;
                            color: #333;
                        }
                        &>p:nth-of-type(2) {
                            width: 216/100rem;
                            font-size: 24/100rem;
                            color: #ccc;
                        }
                    }
                }
            }
        }
        .mv {
            width: 100%;
            border-top: 1px solid #ccc;
            .mv-top {
                width: 100%;
                height: 120/100rem;
                display: flex;
                justify-content: space-between;
                h3 {
                    font-size: 34/100rem;
                    color: #333;
                    font-weight: bold;
                    line-height: 120/100rem;
                }
                span {
                    font-size: 26/100rem;
                    text-align: center;
                    padding: 0 20/100rem;
                    height: 66/100rem;
                    line-height: 66/100rem;
                    box-sizing: border-box;
                    border-radius: 33/100rem;
                    border: 1px solid #333;
                    margin-top: 27/100rem;
                }
            }
            .mv-bottom {
                width: 100%;
                ul {
                    list-style: none;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    li {
                        margin-bottom: 40/100rem;
                        div {
                            width: 334/100rem;
                            border-radius: 15/100rem;
                            overflow: hidden;
                            position: relative;
                            img {
                                width: 100%;
                            }
                            p {
                                position: absolute;
                                top: 2/100rem;
                                right: 5/100rem;
                                img {
                                    width: 26/100rem;
                                    vertical-align: top;
                                    position: relative; //相对于自己原来的位置
                                    top: 5/100rem;
                                }
                                span {
                                    margin-left: 3/100rem;
                                    font-size: 26/100rem;
                                    color: #fff;
                                }
                            }
                        }
                        &>p:nth-of-type(1) {
                            width: 216/100rem;
                            margin-top: 15/100rem;
                            font-size: 26/100rem;
                            color: #333;
                        }
                        &>p:nth-of-type(2) {
                            width: 216/100rem;
                            font-size: 24/100rem;
                            color: #ccc;
                        }
                    }
                }
            }
        }
        .dj {
            width: 100%;
            border-top: 1px solid #ccc;
            .dj-top {
                width: 100%;
                height: 120/100rem;
                display: flex;
                justify-content: space-between;
                h3 {
                    font-size: 34/100rem;
                    color: #333;
                    font-weight: bold;
                    line-height: 120/100rem;
                }
                span {
                    font-size: 26/100rem;
                    text-align: center;
                    padding: 0 20/100rem;
                    height: 66/100rem;
                    line-height: 66/100rem;
                    box-sizing: border-box;
                    border-radius: 33/100rem;
                    border: 1px solid #333;
                    margin-top: 27/100rem;
                }
            }
            .dj-bottom {
                width: 100%;
                ul {
                    list-style: none;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    li {
                        margin-bottom: 40/100rem;
                        div {
                            width: 216/100rem;
                            height: 216/100rem;
                            border-radius: 15/100rem;
                            overflow: hidden;
                            position: relative;
                            img {
                                width: 100%;
                            }
                            p {
                                position: absolute;
                                bottom: 10/100rem;
                                right: 5/100rem;
                                img {
                                    width: 40/100rem;
                                    vertical-align: top;
                                    position: relative; //相对于自己原来的位置
                                    top: 5/100rem;
                                }
                                span {
                                    font-size: 26/100rem;
                                    color: #fff;
                                }
                            }
                        }
                        &>p {
                            width: 216/100rem;
                            margin-top: 10/100rem;
                            font-size: 26/100rem;
                            color: #333;
                        }
                        
                    }
                }
            }
        }
    }
}